<template>
  <view class="container">
    <!-- 标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }"
        @click="currentTab = 0"
      >
        <text class="tab-text">待审核</text>
        <view class="tab-underline" v-if="currentTab === 0"></view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }"
        @click="currentTab = 1"
      >
        <text class="tab-text">已结账</text>
        <view class="tab-underline" v-if="currentTab === 1"></view>
      </view>
    </view>

    <!-- 记录列表 -->
    <view class="record-list">
      <!-- 待审核列表 -->
      <view v-if="currentTab === 0">
        <view class="record-item" v-for="(item, index) in pendingList" :key="index">
          <!-- 时间与状态 -->
          <view class="record-header">
            <text class="record-time">{{ item.time }}</text>
            <text class="status pending">待审核</text>
          </view>
          
          <!-- 数据内容（两列布局） -->
          <view class="record-content">
            <view class="content-left">
              <text class="content-item">预存款: {{ item.deposit }}</text>
              <text class="content-item">游乐币: {{ item.funCoin }}</text>
              <text class="content-item">电子彩票: {{ item.eLottery }}</text>
            </view>
            <view class="content-right">
              <text class="content-item">游戏币: {{ item.gameCoin }}</text>
              <text class="content-item">彩票: {{ item.lottery }}</text>
              <text class="content-item">积分: {{ item.score }}</text>
            </view>
          </view>
          
          <!-- 分隔线 -->
          <view class="divider" v-if="index !== pendingList.length - 1"></view>
        </view>
      </view>

      <!-- 已结账列表 -->
      <view v-if="currentTab === 1">
        <view class="record-item" v-for="(item, index) in settledList" :key="index">
          <!-- 时间与状态 -->
          <view class="record-header">
            <text class="record-time">{{ item.time }}</text>
            <text class="status settled">已结账</text>
          </view>
          
          <!-- 数据内容（两列布局） -->
          <view class="record-content">
            <view class="content-left">
              <text class="content-item">预存款: {{ item.deposit }}</text>
              <text class="content-item">游乐币: {{ item.funCoin }}</text>
              <text class="content-item">电子彩票: {{ item.eLottery }}</text>
            </view>
            <view class="content-right">
              <text class="content-item">游戏币: {{ item.gameCoin }}</text>
              <text class="content-item">彩票: {{ item.lottery }}</text>
              <text class="content-item">积分: {{ item.score }}</text>
            </view>
          </view>
          
          <!-- 分隔线 -->
          <view class="divider" v-if="index !== settledList.length - 1"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中标签（0:待审核 1:已结账）
      currentTab: 0,
      // 待审核数据
      pendingList: [
        {
          time: '2025-10-24 15:00:00',
          deposit: '12345',
          gameCoin: '2856',
          funCoin: '145',
          lottery: '4566',
          eLottery: '4565',
          score: '486846'
        },
        {
          time: '2025-10-24 15:00:00',
          deposit: '12345',
          gameCoin: '2856',
          funCoin: '145',
          lottery: '4566',
          eLottery: '4565',
          score: '486846'
        },
        {
          time: '2025-10-24 15:00:00',
          deposit: '12345',
          gameCoin: '2856',
          funCoin: '145',
          lottery: '4566',
          eLottery: '4565',
          score: '486846'
        }
      ],
      // 已结账数据
      settledList: [
        {
          time: '2025-10-24 15:00:00',
          deposit: '12345',
          gameCoin: '2856',
          funCoin: '145',
          lottery: '4566',
          eLottery: '4565',
          score: '486846'
        },
        {
          time: '2025-10-24 15:00:00',
          deposit: '12345',
          gameCoin: '2856',
          funCoin: '145',
          lottery: '4566',
          eLottery: '4565',
          score: '486846'
        },
        {
          time: '2025-10-24 15:00:00',
          deposit: '12345',
          gameCoin: '2856',
          funCoin: '145',
          lottery: '4566',
          eLottery: '4565',
          score: '486846'
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.shangmengCheckoutRecord')
  	});
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 标签栏样式 */
.tab-bar {
  display: flex;
  background-color: #ffffff;
  padding: 0 40rpx;
  border-bottom: 1px solid #eeeeee;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25rpx 0;
  position: relative;
}

.tab-item.active .tab-text {
  color: #333333;
  font-weight: bold;
}

.tab-text {
  font-size: 34rpx;
  color: #666666;
}

.tab-underline {
  width: 50rpx;
  height: 4rpx;
  background-color: #ff3b30;
  position: absolute;
  bottom: 0;
}

/* 记录列表容器 */
.record-list {
  padding: 20rpx;
}

/* 单条记录样式 */
.record-item {
  background-color: #ffffff;
  border-radius: 8rpx;
  padding: 25rpx 30rpx;
  margin-bottom: 20rpx;
}

/* 记录头部（时间+状态） */
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.record-time {
  font-size: 28rpx;
  color: #999999;
}

/* 状态样式 */
.status {
  font-size: 28rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.status.pending {
  color: #ff3b30;
  background-color: #fff5f5;
  border: 1px solid #ffecec;
}

.status.settled {
  color: #00b42a;
  background-color: #f0fff4;
  border: 1px solid #e6ffef;
}

/* 记录内容（两列布局） */
.record-content {
  display: flex;
  justify-content: space-between;
}

.content-left, .content-right {
  flex: 1;
}

.content-right {
  padding-left: 40rpx;
}

/* 内容项样式 */
.content-item {
  display: block;
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 15rpx;
}

.content-item:last-child {
  margin-bottom: 0;
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: #eeeeee;
  margin-top: 20rpx;
}
</style>